<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: tql
  Date: 2020/12/19
  Time: 11:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>量表答题界面</title>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/personalityShow.css"/>
    <style>
        .myItem{
            display: none;
        }
        .active{
            display: block;
        }
    </style>
</head>
<body background="../images/bac1.jpg">

<div class="row-fluid" style="padding-top: 150px" >
    <div class="col-md-4"></div>
    <div class="col-md-4" style="background-color: #FFFFFF;box-shadow:8px 8px 15px gray;" >
        <%--轮播图实现方式--%>
        <%--<form action="/submit" method="post">
            <div>
                <div id="carousel" style="width: 350px;margin: auto">
                    <div id="myCarousel" class="carousel slide" data-ride="carousel" style="z-index: 10;" data-interval="86400000">
                        <div class="carousel-inner" style="margin-top: 50px">
                            <div class="item active"style="width: 100%">
                                <h4>${personalities.get(0).name}</h4>

                                <input type="radio" name="0" value="${personalities.get(0).aScore}">
                                <span>${personalities.get(0).optionA}</span>
                                <br>
                                <input type="radio" name="0" value="${personalities.get(0).bScore}">
                                <span>${personalities.get(0).optionB}</span>
                                <br>
                                <input type="radio" name="0" value="${personalities.get(0).cScore}">
                                <span>${personalities.get(0).optionC}</span>
                                <br>
                                <input type="radio" name="0" value="${personalities.get(0).dScore}">
                                <span>${personalities.get(0).optionD}</span>
                            </div>
                            <c:forEach items="${personalities}" var="personality" varStatus="index" begin="1">
                                <div class="item" style="width: 100%">
                                    <h4>${personality.name}</h4>
                                    <input type="radio" name="${index}" value="${personality.aScore}">
                                    <span>${personality.optionA}</span>
                                    <br>
                                    <input type="radio" name="${index}" value="${personality.bScore}">
                                    <span>${personality.optionB}</span>
                                    <br>
                                    <input type="radio" name="${index}" value="${personality.cScore}">
                                    <span>${personality.optionC}</span>
                                    <br>
                                    <input type="radio" name="${index}" value="${personality.dScore}">
                                    <span>${personality.optionD}</span>
                                    <br>
                                </div>
                            </c:forEach>
                        </div>
                    </div>
                </div>
            </div>


            <div style="margin: 30px" align="center">
                <input type="submit" value="submit" style="background-color: lightblue;color:#FFFAFA;font-size: 16px">
            </div>

        </form>--%>

        <form action="/submit" method="post">
            <div class="myItem active"style="width: 100%">
                <h4>1.${personalities.get(0).name}</h4>

                <input type="radio" name="0" value="${personalities.get(0).aScore}">
                <span>${personalities.get(0).optionA}</span>
                <br>
                <input type="radio" name="0" value="${personalities.get(0).bScore}">
                <span>${personalities.get(0).optionB}</span>
                <br>
                <input type="radio" name="0" value="${personalities.get(0).cScore}">
                <span>${personalities.get(0).optionC}</span>
                <br>
                <input type="radio" name="0" value="${personalities.get(0).dScore}">
                <span>${personalities.get(0).optionD}</span>
                <div style="margin-top: 10px">
                    <button class="btn btn-default" type="button" onclick="forward()" >上一题</button>
                    <button class="btn btn-default" type="button" onclick="next()">下一题</button>
                </div>
            </div>
            <jsp:useBean id="personalities" scope="request" type="java.util.List"/>
            <c:forEach items="${personalities}" var="personality" varStatus="index" begin="1" step="1">
                <div class="myItem" style="width: 100%">
                    <h4>${index.count+1}.${personality.name}</h4>
                    <input type="radio" name="${index.count}" value="${personality.aScore}">
                    <span>${personality.optionA}</span>
                    <br>
                    <input type="radio" name="${index.count}" value="${personality.bScore}">
                    <span>${personality.optionB}</span>
                    <br>
                    <input type="radio" name="${index.count}" value="${personality.cScore}">
                    <span>${personality.optionC}</span>
                    <br>
                    <input type="radio" name="${index.count}" value="${personality.dScore}">
                    <span>${personality.optionD}</span>
                    <br>
                    <div style="margin-top: 10px">
                        <c:if test="${index.count == personalities.size()-1}">
                            <button class="btn btn-default" type="button" onclick="forward()" >上一题</button>
                            <button class="btn btn-default" type="button" onclick="totalScore()">提交</button>
                        </c:if>

                        <c:if test="${index.count != personalities.size()-1}">
                        <button class="btn btn-default" type="button" onclick="forward()" >上一题</button>
                        <button class="btn btn-default" type="button" onclick="next()">下一题</button>
                        </c:if>
                    </div>
                </div>
            </c:forEach>
        </form>
    </div>
    <div class="col-md-4"></div>
</div>
<%--轮播图实现方式的上下题跳转--%>
<%--<div>
    <!-- 轮播（Carousel）导航 -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"
       style="background-image: none;">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">上一张</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"
       style="background-image: none;">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">下一张</span>
    </a>
</div>--%>
<script>
    var num =0;
    var checkArr = new Array($(".myItem").length);
    var myItems = $(".myItem");
    /*显示上一题的方法*/
    function forward() {
        checkChecked();
        if(num > 0)
            num--;
        /*如果数组里面有值，说明已经答过*/
        if(checkArr[num] !== undefined)
            $(".active input")[checkArr[num]].checked = true;
        /*让下一题显示*/
        myItems[num].classList.add("active");
        /*让此题不可见*/
        myItems[num+1].classList.remove("active");
    }
    /*根据上面定义的数组 给已答过的题设置选中状态*/
    function checkChecked(){
        for(var i=0;i<$(".active input[type=radio]").length;i++){
            if($(".active input")[i].checked === true){
                checkArr[num] = i;
            }
        }
    }
    /*显示下一题的方法*/
    function next () {
        checkChecked();
        /*对边界的判断*/
        if(num < myItems.length-1)
            num++;
        myItems[num-1].classList.remove("active");
        myItems[num].classList.add("active");
        if(checkArr[num] !== undefined)
            $(".active input")[checkArr[num]].checked = true;
    }
    function totalScore () {
        var score=0;
        var d = $(".myItem input[type=radio]:checked");
        for(var i=0;i<d.length;i++){
            score += parseInt($(d[i]).val());
        }
        //alert(score);
        /*另一种统计得分的方法，效果与上边的一样*/
        /*var totalScore=0;
        for(var i=0;i<num;i++){
            var input = $(".myItem")[i].getElementsByTagName("input")[checkArr[i]];
            if(input !== undefined)
            totalScore += parseInt(input.value);
        }
        alert(totalScore);*/
        /*表单的提交，现在是注释状态，记得到时候取消注释*/
        //document.forms[0].submit();
        window.location.href = "jsp/scale_result.jsp";
    }
</script>
</body>
</html>
